<template>
  <view class="add-friend">
    <view class="add-options">
      <view class="_item">
        <view class="_item-avatar">
          <image class="_avatar-img" src="@/static/img/chat/pic.jpg"></image>
        </view>
        <view class="_item-content">
          <view class="_content-left">
            <view class="_content-name"><text>面对面建群</text></view>
            <view class="_content-reply"
              ><text>与身边的朋友进去同一个群聊</text></view
            >
          </view>
          <view class="_content-right">
            <up-icon name="arrow-right" color="#5a5a5a" size="36"></up-icon>
          </view>
        </view>
      </view>
      <view class="_item">
        <view class="_item-avatar">
          <image class="_avatar-img" src="@/static/img/chat/pic.jpg"></image>
        </view>
        <view class="_item-content">
          <view class="_content-left">
            <view class="_content-name"><text>手机联系人</text></view>
            <view class="_content-reply"
              ><text>添加或邀请通讯录中的朋友</text></view
            >
          </view>
          <view class="_content-right">
            <up-icon name="arrow-right" color="#5a5a5a" size="36"></up-icon>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup></script>

<style lang="scss" scoped>
.add-friend {
  width: 100%;

  .add-options {
    width: 100%;
    padding: 48rpx 26rpx;
    box-sizing: border-box;
  }
}

._item {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  // align-items: center;
  margin-top: 20rpx;

  ._item-avatar {
    width: 80rpx;
    height: 80rpx;
    border-radius: 8rpx;

    ._avatar-img {
      width: 100%;
      height: 100%;
      border-radius: 8rpx;
    }
  }

  ._item-content {
    width: calc(100% - 108rpx);
    // height: 80rpx;
    margin-left: 28rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;

    ._content-left {
      display: flex;
      flex-direction: column;
      justify-content: center;

      ._content-name {
        font-size: 30rpx;
        font-weight: 400;
        color: #1c1c1c;
      }

      ._content-reply {
        font-size: 22rpx;
        font-weight: 400;
        color: #5a5a5a;
      }

      ._content-info {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        width: 260rpx;

        ._info-job {
          font-size: 26rpx;
          font-weight: 400;
          color: #d7d6dc;
        }

        ._info-type {
          font-size: 26rpx;
          font-weight: 400;
          color: #d7d6dc;
        }
      }
    }

    ._content-right {
      display: flex;
      justify-content: flex-end;
      align-items: center;

      ._right-icon {
        width: 36rpx;
        height: 36rpx;
        min-width: 36rpx;
        margin-right: 16rpx;
      }

      ._right-text {
        font-size: 30rpx;
        font-weight: 400;
        color: #1c1c1c;
      }

      .add-btn {
        width: max-content;
        height: 64rpx;
        background-color: #1872ff;
        border-radius: 200rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 20rpx;
        box-sizing: border-box;

        ._add-icon {
          width: 36rpx;
          height: 36rpx;
          min-width: 36rpx;
          margin-right: 10rpx;
        }

        ._add-text {
          font-size: 30rpx;
          font-weight: 500;
          color: #fffcfc;
        }
      }
    }

    ::after {
      content: "";
      width: 100%;
      height: 1px;
      background-color: #f6f6f6;
      position: absolute;
      bottom: -14rpx;
      left: 0;
    }
  }
}

._item:last-child {
  ._item-content {
    ::after {
      display: none;
    }
  }
}
</style>
